<template>
  <div>
    <!-- <van-nav-bar left-text="返回" right-text="按钮" left-arrow>
      <template #title> 自定义标题 </template> -->
    </van-nav-bar>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker title="标题" :show-toolbar="false" :columns="columns" />
          <van-row>
            <van-col :span="8">
              <van-button plain type="primary" block>取消</van-button>
            </van-col>
            <van-col :span="16">
              <van-button type="primary" block>确认</van-button>
            </van-col>
          </van-row>
        </van-dropdown-item>
        <van-dropdown-item title="方式" v-model="value" :options="option" />
        <van-dropdown-item title="租金" v-model="value" :options="option" />
        <van-dropdown-item title="筛选" @open="show = true" />
      </van-dropdown-menu>
    </van-sticky>
      <van-card
      num="2"
      price="11800元/月"
      desc="三室/117/南/天际花园"
      title="整租·天际花园 3居室 11800"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="danger">近地铁</van-tag>
        <van-tag plain type="danger">精装</van-tag>
        <van-tag plain type="danger">双卫生间</van-tag>
        <van-tag plain type="danger">随时看房</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '40%', height: '100%' }"
      >内容</van-popup
    >
    <div style="height: 1000px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      show: false
    }
  },
  methods: {}
}
</script>

<style scoped lang="less"></style>

